headless UI
Tailwind CSSと併用することが前提のHeadless Component Library
10個ぐらいしか提供されていない
コアなものが多いので割と十分だったりする
Web Accessibilityが考慮されている
website
function MyTabs() {
return (
<Tab.Group>
<Tab.List>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>Content 1</Tab.Panel>
<Tab.Panel>Content 2</Tab.Panel>
<Tab.Panel>Content 3</Tab.Panel>
</Tab.Panels>
</Tab.Group>
)
}
Tab.Group
manual
vertcal
defaultIndex
onChange
ui-selected
とかで指定できる<Tab className="ui-selected:bg-blue-500 ui-selected:text-white ui-not-selected:bg-white ui-not-selected:text-black">
Tab 1
</Tab>